<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>系统-角色</title>

    <link rel="stylesheet" href="../../plugins/fontawesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../../plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
    <link rel="stylesheet" href="../../plugins/icheck-bootstrap/icheck-bootstrap.min.css">
    <link rel="stylesheet" href="../../plugins/select2/css/select2.min.css">
    <link rel="stylesheet" href="../../plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">
    <link rel="stylesheet" href="../../adminLTE/css/adminlte.min.css">
    <link rel="stylesheet" href="../css/cloud.css">
</head>
<body class="content-wrapper" style="padding: 15px">
<!--顶部条-->
<div style="padding: 0 7px 15px 7px" class="clearfix">
    <!--搜索输入框组-->
    <div class="input-group pull-left" style="width: 50%">
        <input id="keyword" class="form-control" type="search" placeholder="角色名称">
        <div class="input-group-append">
            <button id="search" class="btn btn-info btn-flat"><i class="fa fa-search"></i></button>
        </div>
    </div>
    <!--新增按钮-->
    <button id="add" class="btn btn-info pull-right"><i class="fa fa-plus"></i> 新建角色</button>
</div>
<!--数据展示-->
<div class="container-fluid">
    <table id="table" class="table table-sm table-hover table-bordered">
        <thead><tr>
            <th>#</th>
            <th>角色名称</th>
            <th>创建时间</th>
            <th>包含权限数量</th>
            <th>包含用户数量</th>
            <th>操作</th>
        </tr></thead>
        <tbody><tr>
            <td>{{index}}</td>
            <td>{{name}}</td>
            <td>{{createDate}}</td>
            <td><span class="badge bg-info" data-toggle="tooltip" data-placement="bottom" title="{{permissionNames}}">{{permissionCnt}}</span></td>
            <td><span class="badge bg-info" title="{{userNames}}">{{userCnt}}</span></td>
            <td>
                <button class="btn btn-xs btn-outline-primary modify" data-id="{{id}}">
                    <i class="fa fa-pencil"></i> 编辑
                </button>
                <button class="btn btn-xs btn-outline-danger remove" data-id="{{id}}">
                    <i class="fa fa-times"></i> 删除
                </button>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<!--加载更多-->
<div id="load-more" class="text-sm-center text-primary" style="display: none;">
    <span style="cursor: pointer"><i class="fa fa-hand-o-right"></i> 点击加载更多数据</span>
</div>
<!--正在加载-->
<div id="loading" class="text-sm-center text-gray" style="display: none;">
    <span><i class="fa fa-refresh fa-spin"></i> 正在加载...</span>
</div>
<!--全部加载-->
<div id="load-all" class="text-sm-center text-success" style="display: none;">
    <i class="fa fa-info-circle"></i> 已加载全部数据
</div>
<!--加载失败-->
<div id="load-error" class="text-sm-center text-danger" style="display: none;">
    <i class="fa fa-exclamation-triangle"></i> 加载失败
</div>
<!--详情-->
<div id="detail" class="side-panel right width400 bg-white hide">
    <div class="bg-white" style="padding:20px">
        <input type="hidden" id="id" name="id">
        <div class="form-group">
            <label for="name">名称</label>
            <input type="text" class="form-control" id="name" name="roleName" placeholder="请填写角色名称">
        </div>
        <div class="form-group">
            <label for="permissionIds">权限</label>
            <div class="select2-info">
                <select class="select2" data-dropdown-css-class="select2-info" data-placeholder="请选择角色权限"
                        id="permissionIds" name="permissionIds" style="width: 100%;" multiple></select>
            </div>
        </div>
        <div class="bg-white">
            <button id="ok" class="btn btn-info"><i class="fa fa-check"></i> 确定</button>
            <button id="cancel" class="btn btn-default"><i class="fa fa-times"></i> 取消</button>
        </div>
    </div>
</div>

<script src="../../plugins/jquery/jquery.min.js"></script>
<script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../../plugins/select2/js/select2.full.min.js"></script>
<script src="../js/common.js"></script>
<script src="../js/child.js"></script>
<script>
    var select2Ctrl = new Select2Ctrl("#permissionIds", Url.baseService.permissionPage, "id", "permissionName", "select2");
    select2Ctrl.init();


    var tableCtrl = new TableCtrl(
        Url.baseService.rolePageByKeyword,
        Url.baseService.roleDetail,
        Url.baseService.roleCreate,
        Url.baseService.roleModify,
        Url.baseService.roleRemove,
        function (template, record, index) {
            return template
                .replace(new RegExp("{{index}}", "gm"), index + 1)
                .replace(new RegExp("{{id}}", "gm"), record.id)
                .replace(new RegExp("{{name}}", "gm"), record.roleName)
                .replace(new RegExp("{{createDate}}", "gm"), record.createDate)
                .replace(new RegExp("{{permissionCnt}}", "gm"), record.permissions.length)
                .replace(new RegExp("{{userCnt}}", "gm"), record.users.length)
                .replace(new RegExp("{{permissionNames}}", "gm"), record.permissionNames)
                .replace(new RegExp("{{userNames}}", "gm"), record.userNames)
        },
        function () {
            var validate = true;
            var record = {};
            record.id = $("#id").val();
            record.roleName = $("#name").val();
            record.permissionIds = $("#permissionIds").val();

            if (Utils.isEmpty(record.roleName)) {
                $("#name").addClass("is-invalid");
                validate = false;
            } else {
                $("#name").addClass("is-valid");
            }
            if (Utils.isEmpty(record.permissionIds)) {
                $("#permissionIds").attr("data-dropdown-css-class", "select2-danger").parent().addClass("select2-danger");
                validate = false;
            } else {
                $("#permissionIds").attr("data-dropdown-css-class", "select2-info").parent().addClass("select2-info");
            }

            if (validate) {
                return record;
            } else {
                return undefined;
            }
        }
    );

    tableCtrl.getTemplate();
    tableCtrl.getRecords();
    tableCtrl.bindEvent();
</script>

</body>
</html>